.mobile-main{
  width: 100%;
  height: 100%;
  // background-color: #48b3a6;
  position: relative;
  @keyframes close
  {
    0%   {
      height: 200px;
    }
    100% {
      height: 40px;
    }
  }
  @keyframes open
  {
    0%   {
      height: 40px;
    }
    100% {
      height: 200px;
    }
  }

  @-moz-keyframes open /* Firefox */
  {
    0%   {
      height: 40px;
    }
    100% {
      height: 200px;
    }
  }

  @-webkit-keyframes open /* Safari 和 Chrome */
  {
    0%   {
      height: 40px;
    }
    100% {
      height: 200px;
    }
  }

  @-o-keyframes open /* Opera */
  {
    0%   {
      height: 40px;
    }
    100% {
      height: 200px;
    }
  }
  .contact-list{
    position: fixed;
    width: 40px;
    height: 0;
    right: 10px;
    bottom: 100px;
    z-index: 10;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    img{
      margin-bottom: 10px;
      margin-left: 5px;
      width: 30px;
      height: 30px;
    }
  }
  .img-btn{
    position: fixed;
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 100px;
    z-index: 16;
  }
  .add-img{
    width: 40px;
    height: 40px;
    background: url("/static/index/m_add.png");
    background-size: 40px 40px;
  }
  .close-img{
    width: 40px;
    height: 40px;
    background: url("/static/index/m_close.png");
    background-size: 40px 40px;
  }
  .close{
    height: 0px;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation: close 0.5s;
    -moz-animation: close 0.5s;	/* Firefox */
    -webkit-animation: close 0.5s;	/* Safari 和 Chrome */
    -o-animation: close 0.5s;	/* Opera */
  }
  .open{
    padding-top: 10px;
    height: 200px;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation: open 0.5s;
    -moz-animation: open 0.5s;	/* Firefox */
    -webkit-animation: open 0.5s;	/* Safari 和 Chrome */
    -o-animation: open 0.5s;	/* Opera */
  }
  .banner{
    .header{
      top: 0;
      z-index: 10;
      width: 100%;
      position: absolute;
      height: 44px;
      background-color: rgba(255,255,255,0.2);
      text-align: center;
      display: flex;
      img{
        margin: auto;
        width: 122px;
        height: 26px;
      }
    }
    width: 100%;
    height: 400px;
    background: url("/static/index/m_banner1.jpg");
    background-size: 100% 100%;
    color: #ffffff;
    overflow: hidden;
    position: relative;
    .mar-top-120{
      margin-top: 145px;
    }
    .big-title{
      text-align: center;
      font-family: MicrosoftYaHei-Bold;
      font-size: 24px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 9px;
    }
    .little-title{
      padding: 0;
      text-align: center;
      font-family: MicrosoftYaHeiLight;
      font-size: 10px;
      font-weight: normal;
      font-stretch: normal;
      .bold{
        color: #ffffff;
        font-weight: bold;
        opacity: 100;
      }
      .opacity-6{
        opacity: .6;
      }
    }
    .down-item{
      margin-top: 50px;
      display: flex;
      justify-content: center;
      img{
        padding: 0 40px;
        width: 210px;
        cursor: pointer;
      }
    }
  }
  .project-list{
    font-weight: normal;
    font-stretch: normal;
    text-align: center;
    .new-world{
      margin-top: 18px;
      font-weight: bold;
      font-family: MicrosoftYaHei-Bold;
      font-size: 20px;
      letter-spacing: 0px;
      color: #ff9600;
    }
    .collection{
      margin-top: 4px;
      font-family: MicrosoftYaHeiLight;
      font-size: 12px;
      color: #333333;
      opacity: .6;
    }
    img{
      width: 100%;
      display: block;
      margin:10px auto;
    }
    .tag-item{
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      .item{
        color: #ffffff;
        font-size: 12px;
        width: 80px;
        height: 24px;
        line-height: 24px;
        background-color: #f35b1f;
        box-shadow: 0px 4px 10px 0px
        rgba(243, 91, 31, 0.5);
        border-radius: 11px;
        margin: 0 20px;
      }
      .adventure{
        background-color: #faa218;
        box-shadow: 0px 4px 10px 0px
        rgba(250, 162, 24, 0.5);
      }
      .youth{
        background-color: #3c77ef;
        box-shadow: 0px 4px 10px 0px
        rgba(60, 119, 239, 0.5);
      }
    }
  }
}